<template>
  <div>
    <!-- <div>Welcome</div> -->
    <vue-typed-js :strings="strings" :loop="true" class="vue_typed_js">
      <h1>Hey <span class="typing"></span></h1>
    </vue-typed-js>
    <!-- <donghua class="canvas_donghua"></donghua> -->
    <!-- <button @click="isShow=!isShow">这里试试</button> -->
    <!-- <div class="donghua">
      <transition name="qiuku">
        <img src="../assets/loginImg.jpg" class="img" v-show="isShow" />
      </transition>
    </div> -->
    <div class="footer">
      <div class="footer_item">
        <span>土豆训红薯工作室</span><br />
        <span>地址:湖北省武汉市武昌区友谊大道368号湖北大学</span><br />
        <span>联系电话：13458799908</span>
      </div>
      <div class="footer_item1">
        <span>有问题请联系小管理员</span>
        <img src="../assets/wx_yq.jpg" style="width:100px;height:100px;vertical-align: middle;" />
      </div>
    </div>
  </div>
</template>
<script>

import donghua from './comment/donghua.vue'
export default {
  components: { donghua },
  data() {
    return {
      strings: ['欢迎进入妙妙糖果屋', '错了', '重来', '欢迎进入快乐星球'],
      isShow: true,
      timer: null,
    }
  },
  component:{
    donghua
  },
  mounted() {
    this.startTimer()
  },
  methods: {
    clearTimer() {
      clearTimeout(this.timer)
      this.timer = null
    },
    startTimer() {
      this.isShow = !this.isShow
      if (this.timer) {
        this.clearTimer()
      }
      this.timer = setTimeout(() => {
        this.startTimer()
      }, 2000)
    },
  },
}
</script>

<style lang="less">
.vue_typed_js {
  color: rgb(26, 27, 23);
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer {
  display: flex;
  justify-content:space-between;
  margin-top: 360px; 
  line-height: 30px;
 span{
   margin-top: 15px;
 }
}

// .canvas_donghua{
//   position: relative;
//   left: 400px;
// }
// .footer {
//   // position: relative;
//   // bottom: 0;
//   display: flex;
//   span {
//     margin: 5px;
//     line-height: 35px;
//     font-size: 14px;
//   }
//   .footer_item {
//     position: absolute;
//     left: 250px;
//     bottom: 15px;
//   }
//   .footer_item1 {
//     position: absolute;
//     bottom: 15px;
//     right: 100px;

//     span {
//       vertical-align: middle;
//     }
//     img {
//       vertical-align: middle;
//       width: 100px;
//       height: 100px;
//     }
//   }
// }

.donghua {
  position: relative;

  .img {
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 300px;
    right: 0;
    margin: auto;
  }
}

.qiuku-enter {
  opacity: 0;
  transform: scale(0.2) rotate(-180deg);
}
.qiuku-enter-to {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.qiuku-enter-active {
  transition: 1s all linear;
}
//离开的起点
.qiuku-leave {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
//离开的重点
.qiuku-leave-to {
  opacity: 0;
  transform: scale(0.2) rotate(180deg);
}
//离开中
.qiuku-leave-active {
  transition: 1s all linear;
}
</style>